<template>
  <div>
    <!-- 在职人员页面部分 -->
    <el-dialog  v-dialogDrag  
      title="人员信息详情"
      :visible.sync="personInfoFormVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-tabs
        v-model="activeName"
        class="dialog-Backgroundcolor"
      >
        <el-tab-pane
          label="人事信息"
          style="margin-left:4%"
          name="personInfo"
        >
          <el-form
            ref="personInfoForm"
            :model="formData"
            label-position="top"
            label-width="140px"
            size="small"
          >
            <el-row>
              <el-col class="personBaseInfo">
                <span>基本情况</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="姓名："
                  prop="personName"
                >
                  <el-input
                    v-model="formData.personName"
                    disabled
                  />
                  <div v-show=" formData.pbName!=null&&formData.pbName!='' ">
                    原姓名：<span :style="{ color: formData.pbName!=null&&formData.pbName!='' ? 'red':'black' }" >
                    {{formData.pbName}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="性别："
                  prop="sexCode"
                >
                  <el-select
                    v-model="formData.sexCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in sexLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbsexCode!=null&&formData.pbsexCode!='' ">
                    原性别：<span :style="{ color: formData.pbsexCode!=null&&formData.pbsexCode!='' ? 'red':'black' }" >
                    {{formData.pbsexCode | sexCodeFilter(that)}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="工资类型："
                  prop="meritPayCode"
                >
                  <el-select
                    v-model="formData.meritPayCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in meritPayCodeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbMeritPayCode!=null&&formData.pbMeritPayCode!='' ">
                    原工资类型：<span :style="{ color: formData.pbMeritPayCode!=null&&formData.pbMeritPayCode!='' ? 'red':'black' }" >
                    {{formData.pbMeritPayCode | meritPayCodeFilter(that)}}
                  </span></div>
                </el-form-item>
              </el-col>
              
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="民族："
                  prop="natCode"
                >
                  <el-select
                    v-model="formData.natCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in natLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbnatCode!=null&&formData.pbnatCode!='' ">
                    原民族：<span :style="{ color: formData.pbnatCode!=null&&formData.pbnatCode!='' ? 'red':'black' }" >
                    {{formData.pbsnatCode | natCodeFilter(that)}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="学历："
                  prop="schRecCode"
                >
                  <el-select
                    v-model="formData.schRecCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in schrecLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbschRecCode!=null&&formData.pbschRecCode!='' ">
                    原学历：<span :style="{ color: formData.pbschRecCode!=null&&formData.pbschRecCode!='' ? 'red':'black' }" >
                    {{formData.pbschRecCode | schrecListsFilter(that)}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="身份证号码："
                  prop="idenNo"
                >
                  <el-input
                    v-model="formData.idenNo"
                    disabled
                  />
                  <div v-show=" formData.pbIdenNo!=null&&formData.pbIdenNo!='' ">
                    原身份证号：<span :style="{ color: formData.pbIdenNo!=null&&formData.pbIdenNo!='' ? 'red':'black' }" >
                    {{formData.pbIdenNo  }}
                  </span></div>
                  
                </el-form-item>
              </el-col>
              
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="出生日期："
                  prop="birthday"
                >
                  <el-date-picker
                    v-model="formData.birthday"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="出生日期"
                    disabled
                  />
                  <div v-show=" formData.pbbirthday!=null&&formData.pbbirthday!='' ">
                    原出生日期：<span :style="{ color: formData.pbbirthday!=null&&formData.pbbirthday!='' ? 'red':'black' }" >
                    {{formData.pbbirthday}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="人员身份："
                  prop="personIdeCode"
                >
                  <el-select
                    v-model="formData.personIdeCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in personPerideLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbpersonIdeCode!=null&&formData.pbpersonIdeCode!='' ">
                    原人员身份：<span :style="{ color: formData.pbpersonIdeCode!=null&&formData.pbpersonIdeCode!='' ? 'red':'black' }" >
                    {{formData.pbpersonIdeCode| personPerideListsFilter(that)}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="隶属处（科）室："
                  prop="deptId"
                >
                  <el-select
                    v-model="formData.deptId"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in departmentLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbdeptId!=null&&formData.pbdeptId!='' ">
                    原隶属处（科）室：<span :style="{ color: formData.pbdeptId!=null&&formData.pbdeptId!='' ? 'red':'black' }" >
                    {{formData.pbdeptId | deptIdFilter(that)}}
                  </span></div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
            <el-form-item
              label="人事性质："
              prop="personTypeCode"
            />
            <el-select
              v-model="formData.personTypeCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
              disabled
            >
                  <el-option
                      label="行政人员"
                      value="0"
                    />
                    <el-option
                      label="事业人员"
                      value="1"
                    />
                    <el-option
                      label="离退休人员"
                      value="11"
                    />
                    <el-option
                      label="其他人员"
                      value="99"
                    />
              </el-select>
          </el-col>
            </el-row>
            <el-row>
              <el-col class="personBaseInfo">
                <span>工作情况</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="redstar">
                  <el-form-item
                    label="人员状态："
                    prop="state"
                  >
                    <el-select
                      v-model="formData.state"
                      class="filter-item"
                      placeholder="--请选择--"
                      disabled
                    >
                      <el-option
                       label="在职人员"
                       value="3"
                    />
                    <el-option
                     label="离退休人员"
                      value="1"
                    />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="参加工作时间："
                  prop="workInitDate"
                >
                  <el-date-picker
                    v-model="formData.workInitDate"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="参加工作时间"
                    disabled
                  />
                   <div v-show=" formData.pbworkInitDate!=null&&formData.pbworkInitDate!='' ">
                    原参加工作时间：<span :style="{ color: formData.pbworkInitDate!=null&&formData.pbworkInitDate!='' ? 'red':'black' }" >
                    {{formData.pbworkInitDate }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-show="formData.state == 3">
                <el-form-item
                  label="入职时间："
                  prop="enterAgencyDate"
                >
                  <el-date-picker
                    v-model="formData.enterAgencyDate"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="入职时间"
                    disabled
                  />
                   <div v-show=" formData.pbenterAgencyDate!=null&&formData.pbenterAgencyDate!='' ">
                    原入职时间：<span :style="{ color: formData.pbenterAgencyDate!=null&&formData.pbenterAgencyDate!='' ? 'red':'black' }" >
                    {{formData.pbenterAgencyDate }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8"  v-show="formData.state == 1">
                <el-form-item
                  label="离退休时间："
                  prop="enterAgencyDate"
                >
                  <el-input
                    v-model="formData.retireDate"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-show="formData.state == 1">
                <el-form-item
                  label="工龄："
                  prop="workingYear"
                >
                  <el-input
                    v-model="formData.workingYear"
                    disabled
                  />
                  <div v-show=" formData.pbworkingYear!=null&&formData.pbworkingYear!='' ">
                    原工龄：<span :style="{ color: formData.pbworkingYear!=null&&formData.pbworkingYear!='' ? 'red':'black' }" >
                    {{formData.pbworkingYear }}
                  </span></div>
                </el-form-item>
              </el-col>
            <!-- </el-row>
            <el-row> -->
              <el-col :span="8">
                <el-form-item
                  label="工作单位："
                  prop="agencyName"
                >
                  <el-input
                    v-model="formData.agencyName"
                    disabled
                  />
                  <div v-show=" formData.pbagencyName!=null&&formData.pbagencyName!='' ">
                    原工作单位：<span :style="{ color: formData.pbagencyName!=null&&formData.pbagencyName!='' ? 'red':'black' }" >
                    {{formData.pbagencyName }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8"  v-show="formData.state == 3">
                <el-form-item
                  label="职务："
                  prop="posCode"
                >
                  <el-select
                    v-model="formData.posCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in posgrLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbposCode!=null&&formData.pbposCode!='' ">
                    原职务：<span :style="{ color: formData.pbposCode!=null&&formData.pbposCode!='' ? 'red':'black' }" >
                    {{formData.pbposCode |posCodeFilter(that) }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-show="formData.state == 3">
                <el-form-item
                  label="职级："
                  prop="grCode"
                >
                  <el-select
                    v-model="formData.grCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in grLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                   <div v-show=" formData.pbgrCode!=null&&formData.pbgrCode!='' ">
                    原职级：<span :style="{ color: formData.pbgrCode!=null&&formData.pbgrCode!='' ? 'red':'black' }" >
                    {{formData.pbgrCode |grCodeFilter(that) }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-show="formData.state == 1">
                <el-form-item
                  label="退休时职级："
                  prop="grCode"
                >
                  <el-select
                    v-model="formData.grCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in grLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            <!-- </el-row>
            <el-row> -->
              <el-col :span="8"  v-show="formData.state == 3">
                <el-form-item
                  label="技术等级："
                  prop="tecGrCode"
                >
                  <el-select
                    v-model="formData.tecGrCode"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in tecgrLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbtecGrCode!=null&&formData.pbtecGrCode!='' ">
                    原技术等级：<span :style="{ color: formData.pbtecGrCode!=null&&formData.pbtecGrCode!='' ? 'red':'black' }" >
                    {{formData.pbtecGrCode |tecGrCodeFilter(that) }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8"  v-show="formData.state == 3">
                <el-form-item
                  label="工资级别："
                  prop="salaGrCode"
                />
                <el-select
                  v-model="formData.salaGrCode"
                  class="filter-item"
                  clearable
                  placeholder="--请选择--"
                  disabled
                >
                  <el-option
                    v-for="item in salagrLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="工资卡开户银行："
                  prop="salaCardBank"
                >
                  <el-select
                    v-model="formData.salaCardBank"
                    class="filter-item"
                    placeholder="--请选择--"
                    disabled
                  >
                    <el-option
                      v-for="item in agencyBankLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  <div v-show=" formData.pbsalaCardBank!=null&&formData.pbsalaCardBank!='' ">
                    原开户银行：<span :style="{ color: formData.pbsalaCardBank!=null&&formData.pbsalaCardBank!='' ? 'red':'black' }" >
                    {{formData.pbsalaCardBank |salaCardBankFilter(that) }}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="工资卡卡号："
                  prop="salaCardNo"
                >
                  <el-input
                    v-model="formData.salaCardNo"
                    disabled
                  />
                  <div v-show=" formData.pbSalaCardNo!=null&&formData.pbSalaCardNo!='' ">
                    原工资卡号：<span :style="{ color: formData.pbSalaCardNo!=null&&formData.pbSalaCardNo!='' ? 'red':'black' }" >
                    {{formData.pbSalaCardNo}}
                  </span></div>
                </el-form-item>
              </el-col>
            <!-- </el-row>
            <el-row> -->
              <el-col :span="8">
            <div class="redstar"  v-show=" formData.personTypeId!=null&&formData.personTypeId!='' ">
              <el-form-item
                label="人员类别："
                prop="personTypeId"
              >
                <el-select
                  v-model="formData.personTypeId"
                  class="filter-item"
                  placeholder=""
                 disabled
                >
                  <el-option
                    v-for="item in personTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8" v-show=" formData.postId!=null&&formData.postId!='' ">
            <div class="redstar">
              <el-form-item
                label="职务："
                prop="postId"
              >
                <el-select
                  v-model="formData.postId"
                  class="filter-item"
                  placeholder=""
                  disabled
                >
                  <el-option
                    v-for="item in postList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8"  v-show=" formData.gradeId!=null&&formData.gradeId!='' ">
            <div class="redstar">
              <el-form-item
                label="档次："
                prop="gradeId"
              >
                <el-select
                  v-model="formData.gradeId"
                  class="filter-item"
                  placeholder=""
                  disabled
                >
                  <el-option
                    v-for="item in gradeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
            <!-- </el-row>
            <el-row> -->
              <el-col :span="8" v-show=" formData.levelId!=null&&formData.levelId!='' ">
            <div class="redstar">
              <el-form-item
                label="级别："
                prop="levelId"
              >
                <el-select
                  v-model="formData.levelId"
                  class="filter-item"
                  placeholder=""
                  disabled
                >
                  <el-option
                    v-for="item in levelList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
              <el-col :span="8">
                <el-form-item 
                label="支出功能分类"
                prop="func_name">
                  <el-input
                    v-model="formData.funcName"
                    disabled
                  />
                  <div v-show=" formData.pbfuncName!=null&&formData.pbfuncName!='' ">
                    原支出功能分类：<span :style="{ color: formData.pbfuncName!=null&&formData.pbfuncName!='' ? 'red':'black' }" >
                    {{formData.pbfuncName}}
                  </span></div>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-show=" formData.phone!=null&&formData.phone!='' ">
                <div class="redstar">
              <el-form-item
                label="手机号："
                prop="phone"
              >
                <el-input
                  v-model="formData.phone"
                  disabled
                />
              </el-form-item>

            </div>
          </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="工资信息"
          style="margin-left:4%"
          name="salaryInfo"
        >
          <el-form
            ref="salaryInfoForm"
            :model="formData"
            label-position="top"
            label-width="140px"
            size="small"
          >
            <el-row>
              <el-col class="personBaseInfo">
                <span>基本情况</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                v-for="salary in personSalaryLists"
                :key="salary.keyId"
                :span="8"
              >
                <el-form-item :label="salary.name" v-show="salary.value!=0&&salary.value!=null">
                  <el-input
                    :value="Number(salary.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, &quot;$1,&quot;)"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="变更历史"
          name="changeHistory"
        >
          <el-row>
            <el-col
              :span="12"
              style="padding-right: 10px"
            >
              <div style="margin-bottom: 3%; margin-top: 1%">
                <span style="font-size: 16px; color: #0000FF">{{ formData.personName }}</span>
                <span style="font-size: 16px">变更历史记录</span>
              </div>
              <el-table
                ref="historyTable"
                :stripe="true"
                :data="historyList"
                fit
                height="470px"
                max-height="470px"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                @row-click="historyRowClick"
              >
                <template slot="empty">
                  <tableEmpty />
                </template>
                <el-table-column
                  type="index"
                  label="序号"
                  width="55"
                  align="center"
                />
                <el-table-column
                  label="变更类型"
                  prop="fieldNotes"
                  align="center"
                />
                <el-table-column
                  label="变更生效"
                  prop="startDate"
                  align="center"
                />
                <el-table-column
                  label="备注"
                  prop="remark"
                  align="center"
                />
              </el-table>
            </el-col>
            <el-col :span="12">
              <div style="margin-bottom: 1%">
                <span style="font-size: 16px">要素明细变更前后对比：</span>
                <el-button
                  size="small"
                  class="filter-item"
                  style="margin-left:40%;"
                  type="primary"
                  @click="queryFileInfo"
                >
                  附件查询
                </el-button>
              </div>
              <el-table
                ref="changeTable"
                :stripe="true"
                :data="changeList"
                fit
                style="width: 100%;"
                height="470px"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              >
                <template slot="empty">
                  <tableEmpty />
                </template>
                <el-table-column
                  type="index"
                  label="序号"
                  width="55"
                  align="center"
                />
                <el-table-column
                  label="变更要素"
                  prop="fieldNotes"
                  align="center"
                />
                <el-table-column
                  label="变更前"
                  align="center"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.before | changeValueFilter(row, that) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="变更后"
                  align="center"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.after | changeValueFilter(row, that) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <Enclosure
      ref="enc"
      :middle-table-code="2"
    />
  </div>
</template>

<script>
import {
  queryOnePersonInfo,
  getPersonSalaryInfo4Look,
  getPersonOperateRecordType,
  getPersonOperateRecord
} from '@/api/personInfoMaintenance/archiveQuery'
import { getDepartmentList } from '@/api/unitInformationMaintenance/internalOrganizationMaintenance'
import tableEmpty from '@/components/table/empty'
import Enclosure from '@/components/Enclosure'
export default {
  name: 'PersonSalaryInfo',
  components: { tableEmpty, Enclosure },
  filters: {
    // 变更历史，变更前后过滤器
    changeValueFilter(type, row, that) {
      // 性别
      if (row.field === 'sexCode') {
        const sexLists = that.sexLists
        for (const item in sexLists) {
          if (sexLists[item].code === type) {
            return sexLists[item].name
          }
        }
      } else if (row.field === 'idenTypeCode') {
        // 证件类型
        const citTypeLists = that.citTypeLists
        for (const item in citTypeLists) {
          if (citTypeLists[item].code === type) {
            return citTypeLists[item].name
          }
        }
      } else if (row.field === 'nation') {
        // 国籍
        const countryLists = that.countryLists
        for (const item in countryLists) {
          if (countryLists[item].code === type) {
            return countryLists[item].name
          }
        }
      } else if (row.field === 'natCode') {
        // 民族
        const natLists = that.natLists
        for (const item in natLists) {
          if (natLists[item].code === type) {
            return natLists[item].name
          }
        }
      } else if (row.field === 'fundmode') {
        // 经费保障方式
        const fundmodeLists = that.fundmodeLists
        for (const item in fundmodeLists) {
          if (fundmodeLists[item].code === type) {
            return fundmodeLists[item].name
          }
        }
      } else if (row.field === 'deptId') {
        // 部门
        const departmentLists = that.departmentLists
        for (const item in departmentLists) {
          if (departmentLists[item].code === type) {
            return departmentLists[item].name
          }
        }
      } else if (row.field === 'salaCardBank') {
        // 工资卡银行
        const agencyBankLists = that.agencyBankLists
        for (const item in agencyBankLists) {
          if (agencyBankLists[item].code === type) {
            return agencyBankLists[item].name
          }
        }
      } else if (row.field === 'govCredCardBank') {
        // 公务卡银行
        const agencyBankLists = that.agencyBankLists
        for (const item in agencyBankLists) {
          if (agencyBankLists[item].code === type) {
            return agencyBankLists[item].name
          }
        }
      } else if (row.field === 'meritPayCode') {
        // 工资类别
        const meritPayCodeList = that.meritPayCodeList
        for (const item in meritPayCodeList) {
          if (meritPayCodeList[item].code === type) {
            return meritPayCodeList[item].name
          }
        }
      } else if (row.field === 'schRecCode') {
        // 学历
        const schrecLists = that.schrecLists
        for (const item in schrecLists) {
          if (schrecLists[item].code === type) {
            return schrecLists[item].name
          }
        }
      } else if (row.field === 'posCode') {
        // 职务
        const posgrLists = that.posgrLists
        for (const item in posgrLists) {
          if (posgrLists[item].code === type) {
            return posgrLists[item].name
          }
        }
      } else if (row.field === 'grCode') {
        // 职级
        const grLists = that.grLists
        for (const item in grLists) {
          if (grLists[item].code === type) {
            return grLists[item].name
          }
        }
      } else if (row.field === 'tecGrCode') {
        // 技术等级
        const tecgrLists = that.tecgrLists
        for (const item in tecgrLists) {
          if (tecgrLists[item].code === type) {
            return tecgrLists[item].name
          }
        }
      } else if (row.field === 'isAuth') {
        // 是否在编
        if (type === 1) {
          return '是'
        } else if (type === 0) {
          return '否'
        }
      } else if (row.field === 'salaGrCode') {
        // 工资级别
        const salagrLists = that.salagrLists
        for (const item in salagrLists) {
          if (salagrLists[item].code === type) {
            return salagrLists[item].name
          }
        }
      } else if (row.field === 'isSpecialPost') {
        // 是否特殊岗位
        if (type === 0) {
          return '否'
        } else if (type === 1) {
          return '是'
        }
      } else if (row.field === 'isInsurance') {
        // 是否参加养老保险
        if (type === 0) {
          return '否'
        } else if (type === 1) {
          return '是'
        }
      } else if (row.field === 'in') {
        // 调入
        const agencyLists = that.agencyLists
        for (const item in agencyLists) {
          if (agencyLists[item].id === type) {
            return agencyLists[item].agencyName
          }
        }
      } else if (row.field === 'out') {
        // 调出
        const agencyLists = that.agencyLists
        for (const item in agencyLists) {
          if (agencyLists[item].id === type) {
            return agencyLists[item].agencyName
          }
        }
      } else if (row.field === 'ddr') {
        const agencyLists = that.agencyLists
        for (const item in agencyLists) {
          if (agencyLists[item].id === type) {
            return agencyLists[item].agencyName
          }
        }
      }  else if (row.field === 'inFromAgency') {
        const agencyLists = that.agencyLists
        for (const item in agencyLists) {
          if (agencyLists[item].id === type) {
            return agencyLists[item].agencyName
          }
        }
      } else if(row.field === 'personTypeCode'){
        if (type === '1') {
          return '事业人员'
        } else if (type === '0') {
          return '行政人员'
        } else if (type === '11') {
          return '离退休人员'
        }else if(type === '99'){
          return '其他人员'
        }
      } else if(row.field === 'state'){
        if (type === '3') {
          return '在职'
        } else if (type === '1') {
          state
          return '离退休'
        }
      } else if(row.field === 'personIdeCode'){
        // 人员身份
        const personPerideLists = that.personPerideLists
        for (const item in personPerideLists) {
          if (personPerideLists[item].code === type) {
            return personPerideLists[item].name
          }
        }
      }
      return type
    },
    schrecListsFilter(type, that){
    // 学历
        const schrecLists = that.schrecLists
        for (const item in schrecLists) {
          if (schrecLists[item].code === type) {
            return schrecLists[item].name
          }
        }
  },
  personPerideListsFilter(type, that){
    // 学历
        const personPerideLists = that.personPerideLists
        for (const item in personPerideLists) {
          if (personPerideLists[item].code === type) {
            return personPerideLists[item].name
          }
        }
  },
  natCodeFilter(type, that){
    // 民族
        const natLists = that.natLists
        for (const item in natLists) {
          if (natLists[item].code === type) {
            return natLists[item].name
          }
        }
  },
  sexCodeFilter(type, that){
    const sexLists = that.sexLists
        for (const item in sexLists) {
          if (sexLists[item].code === type) {
            return sexLists[item].name
          }
        }
  },
  deptIdFilter(type, that){
  // 部门
        const departmentLists = that.departmentLists
        for (const item in departmentLists) {
          if (departmentLists[item].code === type) {
            return departmentLists[item].name
          }
        }
  },
  meritPayCodeFilter(type, that){
  // 工资类别
        const meritPayCodeList = that.meritPayCodeList
        for (const item in meritPayCodeList) {
          if (meritPayCodeList[item].code === type) {
            return meritPayCodeList[item].name
          }
        }
  },
  posCodeFilter(type, that){
    // 职务
        const posgrLists = that.posgrLists
        for (const item in posgrLists) {
          if (posgrLists[item].code === type) {
            return posgrLists[item].name
          }
        } 
  },
  grCodeFilter(type, that){
    // 职级
        const grLists = that.grLists
        for (const item in grLists) {
          if (grLists[item].code === type) {
            return grLists[item].name
          }
        }
  },
  tecGrCodeFilter(type, that){
    // 技术等级
        const tecgrLists = that.tecgrLists
        for (const item in tecgrLists) {
          if (tecgrLists[item].code === type) {
            return tecgrLists[item].name
          }
        }
  },
  salaCardBankFilter(type, that){
    // 工资卡银行
        const agencyBankLists = that.agencyBankLists
        for (const item in agencyBankLists) {
          if (agencyBankLists[item].code === type) {
            return agencyBankLists[item].name
          }
        }
  },
    //号码脱敏显示
    hideMiddle(val) {
      if(val!== undefined&& val!== null){//避免列表中存在空数据报错
        return `${val.substring(0,4)}****${val.substring(val.length-4)}`
      }else{
        return val
      }
    }
  },
  
  data() {
    return {
      that: this,
      sexLists:  this.$store.getters.sexLists, // 性别
      natLists: this.$store.getters.natLists, // 民族
      citTypeLists: this.$store.getters.citTypeLists, // 证件类型代码
      schrecLists: this.$store.getters.schrecLists, // 学历
      posgrLists: this.$store.getters.posgrLists, // 职务
      grLists: this.$store.getters.grLists, // 职级
      tecgrLists: this.$store.getters.tecgrLists, // 技术等级
      salagrLists: this.$store.getters.salagrLists, // 工资级别
      agencyBankLists: this.$store.getters.agencyBankLists, // 银行
      countryLists: this.$store.getters.countryLists, // 国籍
      departmentLists: this.$store.getters.departmentLists, // 部门
      personPerideLists: this.$store.getters.personPerideLists, // 人员身份
      fundmodeLists: this.$store.getters.fundmodeLists, // 人员经费保障方式
      agencyLists: this.$store.getters.agencyLists, // 单位信息集合
      meritPayCodeList:this.$store.getters.meritPayCodeList,//工资类型
      salaryTypes: this.$store.getters.salaryTypes, // 人员类型
      personTypeList:this.$store.getters.personTypeList,
      postList: this.$store.getters.postList,
      gradeList:this.$store.getters.gradeList,
      levelList: this.$store.getters.levelList,
      personInfoFormVisible: false,
      activeName: 'personInfo',
      personInfoLists: [], // 人员信息集合
      personSalaryLists: [], // 人员工资数据集合
      agencyId: '',
      formData: {
        id: '',
        state: '',
        agencyCode: '',
        agencyName: '',
        meritPayCode: '',
        fundmode: '',
        personName: '',
        sexCode: '',
        natCode: '',
        idenTypeCode: '',
        idenNo: '',
        birthday: '',
        schRecCode: '',
        personTypeCode: '',
        personIdeCode: '',
        personAddress: '',
        isAuth: '',
        workInitDate: '',
        enterAgencyDate: '',
        posCode: '',
        grCode: '',
        tecGrCode: '',
        salaGrCode: '',
        salaCardNo: '',
        salaCardBank: '',
        govCredCardNo: '',
        govCredCardBank: '',
        startDate: '',
        nation: '',
        isUniSala: '',
        retireDate: '',
        workingYear: '',
        isSpecialPost: '',
        funcName: '',
        pbMeritPayCode:'',
        pbName:'',
        pbIdenNo:'',
        pbSalaCardNo:'',
        pbsexCode:'',
        pbnatCode:'',
        pbidenTypeCode:'',
        pbbirthday:'',
        pbschRecCode:'',
        pbpersonTypeCode:'',
        pbpersonAddress:'',
        pbisAuth:'',
        pbworkInitDate:'',
        pbenterAgencyDate:'',
        pbposCode:'',
        pbgrCode:'',
        pbtecGrCode:'',
        pbsalaGrCode:'',
        pbsalaCardBank:'',
        pbnation:'',
        pbretireDate:'',
        pbpersonIdeCode:'',
        pbfundmode:'',
        pbisSpecialPost:'',
        pbfuncName: ''
      },
      historyList: [],
      changeList: [],
      personInfoId: '',
      operateType: '2',
      personState: ''

    }
  },
  methods: {
    viewInfo(personId, operateType, agencyId, personState) {
      if (operateType !== undefined) {
        this.operateType = operateType
      }
      if (personState !== undefined) {
        this.personState = personState
      } else {
        this.personState = ''
      }
      this.agencyId = agencyId
      this.changeList = []
      this.formData = {}
      this.personInfoId = personId
      this.personInfoFormVisible = true
      this.activeName = 'personInfo'
      // 查询基础数据
      this.initBaseInfo()
      // 获取人员数据
      this.queryOnePersonInfo()
      // 获取工资信息
      this.getPersonSalaryInfo()
      // 获取变更历史类型
      this.getPersonOperateRecordType()
    },
    // 查询人员信息
    queryOnePersonInfo() {
      const queryParam = {}
      queryParam['personId'] = this.personInfoId
      queryOnePersonInfo(queryParam).then(response => {
        this.personInfoLists = response.data
        
        this.formData = Object.assign({}, this.formData, this.personInfoLists)
        // 计算工龄
        if ( this.formData.workInitDate === null) {
            this.formData.workInitDate = '' 
        }
        // if ( this.formData.idenNo !== null&& this.formData.idenNo!== undefined) {
        //     this.formData.idenNo = this.formData.idenNo.substring(0,3)+'****'+this.formData.idenNo.substring(this.formData.idenNo.length-3)
        // }
        
        const workYear = this.formData.workInitDate.split('-')[0]
        if (this.formData.retireDate !== '' && this.formData.retireDate !== null) {
          const retireYear = this.formData.retireDate.split('-')[0]
          this.formData.workingYear = retireYear - workYear
        } else {
          const currentYear = new Date().getFullYear()
          this.formData.workingYear = currentYear - workYear
        }
      })
    },
    // 获取人员工资信息
    getPersonSalaryInfo() {
      const queryParam = {}
      queryParam['agencyId'] = this.agencyId
      queryParam['personId'] = this.personInfoId
      getPersonSalaryInfo4Look(queryParam).then(response => {
        this.personSalaryLists = response.data
      })
    },
    // 变更历史类型
    getPersonOperateRecordType() {
      const queryParam = {}
      queryParam['agencyId'] = this.agencyId
      queryParam['personId'] = this.personInfoId
      queryParam['personState'] = this.personState
      getPersonOperateRecordType(queryParam).then(response => {
        this.historyList = response.data
      })
    },
    // 变更历史记录表行点击事件
    historyRowClick(row) {
      // 人事信息
      this.getPersonOperateRecord(row)
    },
    // 获取人事信息变更历史
    getPersonOperateRecord(row) {
      this.changeList = []
      const queryParam = {}
      queryParam['agencyId'] = this.agencyId
      queryParam['personId'] = this.formData.id
      queryParam['operateCode'] = row.field
      queryParam['creatTime'] = row.creatTime
      getPersonOperateRecord(queryParam).then(response => {
        this.changeList = response.data
      })
    },
    // 附件查询
    queryFileInfo() {
      const personList = [{ id: this.personInfoId }]
      this.$refs.enc.appendixOpen(personList, false, undefined, this.agencyId, this.operateType)
    },
    // 初始化基础数据
    initBaseInfo() {
      getDepartmentList({ agencyId: this.agencyId }).then(
        response => {
          this.departmentLists = Object.assign({}, response.data)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.personBaseInfo {
  font-weight: bold;
}
</style>
